<template>
	<view class="wanl-news">
		<view class="collect-container__head bg-white" :style="{ height: headHeight + 'px' }">
			<view :style="{ height: headHeight + 'px', paddingTop: headTop + 'px' }">
				<view class="navigater flex align-center justify-between">
					<scroll-view scroll-x class="nav text-center" :scroll-left="scrollLeft">
						<view v-for="(item, index) in navList" :key="index" class="cu-item flex-sub margin-lr"
							:class="currentItemId == index ? 'text-green cur' : ''"
							@tap="handleSelect(item.id, index)">
							<text class="text-30">{{item.name}}</text>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- 幻灯片 -->
		<view class="banner">
			<swiper class="square-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500" style="height: 204rpx;" @change="(e) => { currentSwiper = e.detail.current }">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="$wanlshop.oss(item.media)" mode="aspectFill"></image>
					<!-- <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video> -->
				</swiper-item>
			</swiper>
			<view class="indicator">
				<!-- {{ currentSwiper + 1 }}/{{ swiperList.length }} -->
				<text :class="{cur: currentSwiper == k + 1}" v-for="(d,k) in swiperList" :key="k"></text>
			</view>
		</view>
		<!-- 文章列表 -->
		<view class="box">
			<wanl-empty v-if="dataList.length === 0" />
			<view class="bg-white text-df padding-bj margin-bottom-sm margin-lr" v-for="(item,index) in dataList" :key="item.id" @tap="onDetails(item.id, item.title)">
				<view class="flex flex-direction" v-if="item.images_text.length > 2">
					<view class="wanl-news-image justify-between">
						<block v-for="(img, key) in item.images_text" :key="key" v-if="key<= 2">
							<image :src="$wanlshop.oss(img, 125, 100)" mode="aspectFill"></image>
						</block>
						<view class="tag">{{item.images_text.length}}图</view>
					</view>
				
					<view class="wanl-news-box flex-direction justify-between">
						<view class="title padding-top-sm text-lg text-bold text-cut-2">{{item.title}}</view>
						<view class="wanl-sub-box padding-top-sm">
							<view class="cmt">
								<view v-if="currentItemId > 0" class="cu-tag sm line-green round margin-right-xs"><view>{{navList[currentItemId].name}}</view></view>
								<view class="flex align-center justify-start margin-left-xs">
									<text class="iconfont icon-liulan1"></text>
									<text style="margin-left: 4rpx;">{{item.browse}}</text>
								</view>
							</view>
							<view class="text-sm">{{$wanlshop.timeFormat(item.createtime)}}</view>
						</view>
					</view>
				</view>
				<block v-else>
					<view class="flex align-start" v-if="item.image">
						<view class="wanl-news-box flex-direction justify-between margin-right-bj">
							<view class="title text-lg text-bold text-cut-2">{{item.title}}</view>
							<view class="wanl-sub-box">
								<view class="flex align-center justify-start">
									<view v-if="currentItemId > 0" class="cu-tag sm line-green round margin-right-xs"><view>{{navList[currentItemId].name}}</view></view>
									<view class="cmt">
										<view class="flex align-center justify-start">
											<text class="iconfont icon-liulan1"></text>
											<text style="margin-left: 4rpx;">{{item.browse}}</text>
										</view>
									</view>
								</view>
								<view class="text-sm">{{$wanlshop.timeFormat(item.createtime)}}</view>
							</view>
						</view>
						<view class="wanl-news-image"><image :src="$wanlshop.oss(item.image, 120, 100)" mode=""></image></view>
					</view>
					<view class="flex flex-direction" v-else>
						<view class="wanl-news-box flex-direction justify-between">
							<view class="title text-lg text-bold text-cut-2">{{item.title}}</view>
							<view class="wanl-sub-box padding-top-sm">
								<view class="cmt">
									<view v-if="currentItemId > 0" class="cu-tag sm line-green round margin-right-xs"><view>{{navList[currentItemId].name}}</view></view>
									<view class="flex align-center justify-start margin-left-xs">
										<text class="iconfont icon-liulan1"></text>
										<text style="margin-left: 4rpx;">{{item.browse}}</text>
									</view>
								</view>
								<view class="text-sm">{{$wanlshop.timeFormat(item.createtime)}}</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<!-- 加载更多 -->
		<view class="edgeInsetBottom"></view>
		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			scrollLeft:0,
			currentSwiper: 0, // 轮播图右下角数字
			dataList: [],
			reload: false, //判断是否上拉
			total: 0, //数据量
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'more',
			contentText: {
				contentdown: ' ',
				contentrefresh: '加载中',
				contentnomore: ''
			},
			swiperList:[],
			headHeight: 0,
			headTop: 0,
			currentItemId: 0,
			navList: [],
		};
	},
	async onLoad() {
		// 计算页面尺寸
		let sys = this.$wanlshop.wanlsys();
		this.headTop = sys.top;
		this.headHeight = sys.height;
		this.getBanner();
		await uni.request({
			url: '/information/category/lists',
			data:{
				type: 'article'
			},
			method: 'POST',
			success: res => {
				let data = res.data;
				let temp = [{
					name:'全部',
					id:''
				}]
				this.navList = temp.concat(data);
				this.loadData();
			}
		})
	},
	onPullDownRefresh() {
		this.current_page = 1;
		this.reload = true;
		this.loadData();
	},
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.loadData();
		}
	},
	methods: {
		// 选择Tag
		handleSelect(id, index) {
			this.currentItemId = index;
			this.scrollLeft = index  * uni.upx2px(45)
			this.current_page = 1;
			this.reload = true;
			this.loadData();
		},
		async getBanner() {
			await uni.request({
				url: '/publics/advert/content',
				method: 'POST',
				data: {
					position: 'information_index_slide'
				},
				success: res => {
					this.swiperList = res.data;
				}
			});
		},
		async loadData() {
			await uni.request({
				url: '/information/article/lists',
				method: 'POST',
				data: {
					category_id: this.navList[this.currentItemId].id,
					page: this.current_page
				},
				success: res => {
					uni.stopPullDownRefresh();
					this.dataList = this.reload ? res.data.data : this.dataList.concat(res.data.data); //数据 追加
					this.total = res.data.total; //数据量
					this.current_page = res.data.current_page; //当前页码
					this.last_page = res.data.last_page; //总页码
					this.status = res.data.total == 0 ? 'noMore' : 'more';
				}
			});
		}
	}
};
</script>

<style>
	.wanl-news-image {
		display: flex;
		position: relative;
	}
	
.flex.align-start .wanl-news-image {
	width: 220rpx;
	height: 180rpx;
}
.flex.align-start .wanl-news-box {
	height: 180rpx;
}
.wanl-news-image image{
	height: 180rpx;
	border-radius: 6rpx;
}

.wanl-news-image.justify-between image {
	width: 32%;
	height: 180rpx;
}



.wanl-news-image .tag {
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 24rpx;
	color: #fff;
	padding: 2rpx 12rpx;
	background: rgba(0, 0, 0, 0.6);
	z-index: 20;
	transform: scale(0.8);
	transform-origin: 100% 100%;
}
.wanl-news-image.video image {
	height: 280rpx;
	width: 100%;
}
.wanl-news-image.video .icon {
	position: absolute;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transform-origin: 0 0;
}
.wanl-news-image.video .icon text[class*='wlIcon-'] {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	padding: 26rpx;
}

.wanl-news-box {
	flex: 1;
	width: 100%;
	box-sizing: border-box;
	display: flex;
}
.wanl-news-box .title {
	width: 100%;
	word-break: break-all;
	word-wrap: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	box-sizing: border-box;
}
.wanl-sub-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #999;
	box-sizing: border-box;
	line-height: 24rpx;
}
.wanl-sub-box .cmt {
	font-size: 24rpx;
	line-height: 24rpx;
	display: flex;
	align-items: center;
}
</style>
<style lang="less">
	page {
		background-color: #EDEDED;
	}
	.nav .cu-item.cur {
		border: none;
		position: relative;
		&::after {
			position: absolute;
			content: "";
			display: inline-block;
			width: 34rpx;
			height: 4rpx;
			background: #4CBD66;
			bottom: 0;
			left: 34rpx;
		}
	}
	.banner {
		padding-top: 14rpx;
		width: 100%;
		height: 260rpx;
		overflow: hidden;
		image {
			width: 100%;
			height: 206rpx;
			// border-radius: 10rpx;
		}
		/deep/uni-swiper .uni-swiper-wrapper {
			overflow: inherit;
		}
		/deep/uni-swiper .uni-swiper-dots-horizontal {
			bottom: -20rpx;
		}
		/deep/.uni-swiper-dot {
			width: 28rpx;
			height: 4rpx;
			background: #D9D9D9;
		}
		/deep/.uni-swiper-dot.uni-swiper-dot-active {
			width: 42rpx;
			height: 4rpx;
			background: #4CBD66;
		}
	}
	
	.box {
		> view {
			border-radius: 10rpx;
		}
	}
</style>